<!-- 订票步骤-->
<template>
  <div id="bookingStepDiv">
    <div id="imgDiv">
    <img src="../../assets/images-train/stepadvertising.png">
    </div>
    <el-row id="step-row">
      <el-col style="--animate-duration: 0.5s;"
              class="step-col animate__animated animate__fadeInRight"
              :span="4">
        <img src="../../assets/images-train/step1.png">
        <h5>车次查询</h5>
        <h6> 及时关注预售时间选择余票充足车次</h6>
      </el-col>
      <img src="../../assets/images-train/arrows.png">
      <el-col class="step-col animate__animated animate__fadeInRight"
              style="--animate-duration: 0.8s;"
              :span="4">
        <img src="../../assets/images-train/step2.png">
        <h5>填写订单</h5>
        <h6> 若首次互联网购票需在车站身份核验</h6>
      </el-col>
      <img src="../../assets/images-train/arrows.png">
      <el-col class="step-col animate__animated animate__fadeInRight"
              style="--animate-duration: 2s;"
              :span="4">
        <img src="../../assets/images-train/step3.png">
        <h5>排队购票</h5>
        <h6> 新用户需先注册后才能进入订单中心</h6>
      </el-col>
      <img src="../../assets/images-train/arrows.png">
      <el-col
          class="step-col animate__animated animate__fadeInRight"
          style="--animate-duration: 2.2s;"
          :span="4">
        <img src="../../assets/images-train/step4.png">
        <h5>订单支付</h5>
        <h6> 注意查收短信通知合理安排出行时间</h6>
      </el-col>
      <img src="../../assets/images-train/arrows.png">
      <el-col
          class="step-col animate__animated animate__fadeInRight"
          style="--animate-duration: 2.4s;"
          :span="4">
        <img src="../../assets/images-train/step5.png">
        <h5>查看出票结果</h5>
        <h6> 及时关注预售时间选择余票充足车次</h6>
      </el-col>

    </el-row>
  </div>

</template>

<script>
export default {
  name: "BookingSteps"
}
</script>

<style scoped>
#bookingStepDiv{
  margin-left: 150px;
  width: 1200px;
  height: 300px;
}
img{
  margin-top: 0px;
  float: left;
  /*border: 1px solid lightcoral;*/
}
#imgDiv{
  margin-top: 10px;
  height: 170px;
  /*border: 1px solid hotpink;*/
}
#step-row{
  height: 100px;
  /*border: 1px solid red;*/
}
h5{
  float: left;
  margin-left: 15px;
  margin-top: 20px;
  margin-bottom: 5px;
}
h6 {
  color: #999;
  float: right;
  margin-right: 5px;
  margin-top: 0px;
  width: 100px;
}


</style>